<template>
    <div style="min-height:400px;" class="taskhistory">
        <div class="task-history-head">
            <div class="search-box">
                <taskStatus :style="'width:150px'" v-on:getTaskStatus="getTaskStatus"></taskStatus>
                <DatePicker ormat="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择开始日期至结束日期" style="width: 250px" v-model="searchDateArray" @on-change="changeDate"></DatePicker>
                <Button type="primary" icon="ios-search" class="searchBtnColor" @click="doSearch">搜索</Button>
            </div>
            <Icon type="refresh" size="20" class="refresh_icon" @click.native="doRefresh"></Icon>
        </div>
        <Table id="taskHistoryTable"  highlight-row size="small" :columns="columns1" :data="taskHistoryList" ></Table>
        <Page v-if="totalNum > pageSize" style="margin-top:20px;" :total="totalNum" :page-size="pageSize" size="small"  show-elevator  show-total @on-change="chagePage"></Page>
    </div>
</template>
<style scoped>
    .search-box {
        width: 540px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        position: relative;
    }
    
    .task-history-head {
        width: 100%;
        position: relative;
    }
    
    .refresh_icon {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
    }
    
    .ivu-poptip-rel {
        width: 100%;
    }
</style>
<style>
    #taskHistoryTable .ivu-poptip-rel {
        width: 100%;
    }
    
    .taskhistory .ivu-table-cell-expand i {
        font-size: 22px;
        color: #f50;
        font-weight: 600;
    }
</style>
<script>
    import expandRow from './tableTaskExpand.vue'
    import taskService from 'service/taskService.js'
    import taskStatus from 'components/formItem/taskStatus.vue'
    export default {
        name: 'taskHistory',
        props: {
            studentId: [String, Number]
        },
        components: {
            taskStatus
        },
        data() {
            return {
                pageSize: 5,
                totalNum: 0,
                taskStatus: '',
                searchDateArray: [],
                columns1: [{
                    type: 'expand',
                    width: 100,
                    align: "center",
                    title: '收起/展开',
                    render: (h, params) => {
                        return h(expandRow, {
                            props: {
                                rowData: params.row
                            }
                        })
                    }
                }, {
                    title: '工单号',
                    key: 'serialNo',
                    align: "center",
                    render: (h, params) => {
                        return h('div', [
                            h('a', {
                                props: {
                                    // size: 'small'
                                },
                                on: {
                                    click: () => {
                                        let taskId = params.row.id
                                        let task_type = "工单历史-"
                                        let newTagObj = {
                                            path: '/taskdetail?id=' + taskId + '&action_type=append',
                                            is_nav: false,
                                            title: task_type + '工单详情',
                                            name: 'taskdetail_index',
                                            children: []
                                        }

                                        this.$store.dispatch('recordDetailPageTags', newTagObj)
                                        this.$router.push({
                                            path: 'taskdetail',
                                            query: {
                                                id: taskId,
                                                action_type: 'append'
                                            }
                                        })
                                    }
                                }
                            }, params.row.serialNo)
                        ]);
                    }
                }, {
                    title: '工单内容',
                    align: "center",
                    key: 'description',
                    ellipsis: true,
                    render: (h, params) => {
                        return h('Poptip', {
                            style: {
                                width: "100%",
                                cursor: "pointer"
                            },
                            props: {
                                trigger: 'hover',
                                title: "工单内容详情",
                                placement: 'bottom',
                            }

                        }, [
                            h('p', {
                                style: {
                                    "overflow": "hidden",
                                    "text-overflow": "ellipsis",
                                    "white-space": "nowrap",
                                    "-webkit-line-clamp": 1,
                                    "word-break": "keep-all",
                                    "width": "100%"
                                }
                            }, params.row.description),
                            h('div', {
                                slot: 'title'
                            }, [
                                h('p', {
                                    style: {
                                        fontWeight: 'bold',
                                        color: "#196AC1"
                                    }
                                }, "工单内容详情")
                            ]),
                            h('div', {
                                slot: 'content'
                            }, [
                                h('p', params.row.description)
                            ])
                        ])
                    }
                }, {
                    title: '当前处理人',
                    align: "center",
                    key: 'handlerName'
                }, {
                    title: '当前处理组',
                    align: "center",
                    key: 'handlerGroupName'
                }, {
                    title: '工单状态',
                    align: "center",
                    key: 'status',
                    render: (h, params) => {
                        return this.Func.getChineseTaskStatus(params.row.status)
                    }
                }, {
                    title: '操作',
                    align: "center",
                    key: 'action',
                    render: (h, params) => {
                        if (params.row.status != "CLOSED") {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            let taskId = params.row.id
                                            let task_type = "工单历史-"
                                            let newTagObj = {
                                                path: '/taskdetail?id=' + taskId + '&action_type=append',
                                                is_nav: false,
                                                title: task_type + '工单详情',
                                                name: 'taskdetail_index',
                                                children: []
                                            }
                                            this.$store.dispatch('recordDetailPageTags', newTagObj)
                                            this.$router.push({
                                                path: 'taskdetail',
                                                query: {
                                                    id: taskId,
                                                    action_type: 'append'
                                                }
                                            })
                                        }
                                    }
                                }, '追加')
                            ]);
                        } else {
                            return h('div', [
                                h('strong', '----')
                            ]);
                        }
                    }
                }],
                taskHistoryList: []
            }
        },
        watch: {
            '$route' (to) {
                if (to.path.indexOf('/voicecall') > -1) {
                    this.getTaskHistoryList({
                        "page": 0,
                        'size': this.pageSize
                    });
                }

            }
        },
        created() {
            this.getTaskHistoryList({
                "page": 0,
                'size': this.pageSize
            });
        },

        methods: {
            getTaskStatus(status) {
                this.taskStatus = status
            },
            changeDate(dateArray) {
                this.searchDateArray = dateArray
            },
            async doSearch(params) {
                let page = params.page ? params.page : 0

                let data = {
                    'page': page,
                    'size': this.pageSize
                }
                if (this.taskStatus) {
                    Object.assign(data, {
                        'status': this.taskStatus
                    })
                }
                if (this.searchDateArray[0]) {
                    Object.assign(data, {
                        'startDateTime': this.searchDateArray[0]
                    })
                }
                if (this.searchDateArray[1]) {
                    Object.assign(data, {
                        'endDateTime': this.searchDateArray[1]
                    })
                }
                await this.getTaskHistoryList(data)
            },
            async doRefresh() {
                await this.getTaskHistoryList({
                    "page": 0,
                    'size': this.pageSize
                })
            },
            async getTaskHistoryList(data) {
                let dataObj = Object.assign({
                    stuId: this.studentId
                }, data)

                let jsondata = await taskService.getTaskHistoryList(dataObj)

                if (jsondata.state) {
                    this.totalNum = jsondata.data.totalElements
                    this.taskHistoryList = jsondata.data.content
                }

            },
            async chagePage(page) {
                page = parseInt(page - 1)

                if (this.taskStatus || this.searchDateArray[0] || this.searchDateArray[1]) {
                    await this.doSearch({
                        'page': page
                    })
                } else {
                    await this.getTaskHistoryList({
                        'page': page,
                        'size': this.pageSize
                    })
                }
            },
            goTaskDetail(rowdata) {
                let taskId = rowdata.id
                let task_type = "工单历史-"
                let newTagObj = {
                    path: '/taskdetail?id=' + taskId + '&action_type=append',
                    is_nav: false,
                    title: task_type + '工单详情',
                    name: 'taskdetail_index',
                    children: []
                }

                this.$store.dispatch('recordDetailPageTags', newTagObj)
                this.$router.push({
                    path: 'taskdetail',
                    query: {
                        id: taskId,
                        action_type: 'append'
                    }
                })
            }
        }
    }
</script>